import {ChangeEvent, useState} from 'react'
import {message} from 'antd'
import CountDown from '../CountDown';
import styles from "./index.module.scss";
import request from 'service/fetch'
import { useStore } from 'store/index'

interface IProps {
    isShow:boolean,
    onClose:Function
}

export default function Login(props:IProps) {
    const {isShow=false,onClose} = props
    const [isShowVerifyCode,setIsShowVerifyCode] = useState(false)
    const [form ,setForm] = useState({
        phone:'',
        verify:''
    })

    const store = useStore()
    console.log('store=>',store)

    // 关闭弹框
    const handleClose = () =>{
        onClose && onClose()
    }
    // 发送验证码
    const handleGetVerifyCode = () =>{
        if(!form?.phone){
            message.warning('请输入手机号')
            return
        }
        request.post('/api/sendVerifyCode',{
            to: form?.phone,
            templateId:1
        }).then((res: any)=>{
            if(res?.code){
               
                message.success(res.msg)
                setIsShowVerifyCode(true) 
            }else{
               message.error(res?.msg || '未知错误')
            }
        })
    }
    // 登录
    const handleLogin = () =>{
        request.post('/api/user/login',{...form,identity_type:'phone'}).then((res:any)=>{
            if(res?.code === 0){
                // 登录成功
                store.user.setUserInfo(res?.data)
                console.log('store=>', store)
                onClose && onClose()
            }else{
                message.error(res?.msg || '未知错误')
            }
        })
    }
    // 第三方登录
    const handleOAuthGithub = () =>{

    }
    // 输入框赋值
    const handleFormChange = (e: ChangeEvent<HTMLInputElement>) =>{
        const {name,value } = e?.target
        setForm({
            ...form,
            [name]:value
        })
    }
    // 倒计时
    const handleCountDownEnd = () =>{
        setIsShowVerifyCode(false)
    }
    return isShow ? (
       <div className={styles.loginArea}>
            <div className={styles.loginBox}>
                <div className={styles.loginTitle}>
                    <div>手机号登录</div>
                    <div className={styles.close} onClick={handleClose}>x</div>
                </div>
                <input name="phone" type="text" placeholder="请输入手机号" onChange={handleFormChange} value={form.phone} />
                <div className={styles.verifyCodeArea}>
                    <input name="verify" type="text" placeholder="请输入验证码" onChange={handleFormChange} value={form.verify} />
                    <span className={styles.verifyCode} onClick={handleGetVerifyCode}>
                        {isShowVerifyCode ? <CountDown time={10} onEnd={handleCountDownEnd}/> : '获取验证码'}
                    </span>
                </div>
                <div className={styles.LoginBtn} onClick={handleLogin}>登录</div>
                <div className={styles.otherLogin} onClick={handleOAuthGithub}> 使用 Github 登录</div>
                <div className="styles.loginprivacy">
                    注册登录即表示同意
                    <a href="https://www.imooc.com/help/detail/222" target="_blank">隐私政策</a>
                </div>
            </div>
       </div>
    ) : null
  }